﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery速览</title>
</head>
<body>
    <button class="show_switch">显示与隐藏</button>
    <p>点击按钮查看效果</p>

    <input type="text" id="search_data" name="search_data" value="笔记本" />
    <button id="get_taobao_data">获取淘宝搜索建议数据</button>
    <p id="taobao_data"></p>

    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function (){
            $(".show_switch").click(function () {
                $(".show_switch+p").toggle();
            });
       
        $("#get_taobao_data").click(function () {
            var _url = "https://suggest.taobao.com/sug?code=utf-8";
            var _html = "";
            var _q = $("#search_data").val();
            $.ajax({
                url: _url,
                type: 'get',
                data: {
                    q: _q
                },
                dataType: 'jsonp',
                success: function (res) {
                    _html += "<ul>";
                    $.each(res.result, function (n,value) {
                        _html += "<li>" + value[0] + "</li>";
                    });
                    _html += "</ul>";
                    $("#taobao_data").html(_html);
                    }
                });
            });
        });
    </script>
</body>
</html>